<template>
  <div class="card">
    <div class="title">
      <el-page-header content="添加茶种" @back="goBack" />
    </div>
    <div class="body">
      <div class="base-message">
        <el-form label-width="150px" :model="formData">
          <el-form-item label="品种名称（中文名）">
            <el-input
              v-model="formData.chineseName"
              placeholder="请输入中文名！"
              style="width: 280px"
            />
          </el-form-item>
          <el-form-item label="品种名称（拉丁名）">
            <el-input
              v-model="formData.latinName"
              placeholder="请输入拉丁名！"
              style="width: 280px"
            />
          </el-form-item>
          <el-form-item label="等级">
            <el-select v-model="formData.grade" placeholder="请选择">
              <el-option
                v-for="item in gradeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="种植时间">
            <el-date-picker
              v-model="formData.growYear"
              value-format="yyyy-MM-dd"
              align="right"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            />
          </el-form-item>
          <!-- <el-form-item label="是否珍贵品种">
            <el-radio
              v-model="formData.rareVariety"
              :label="1"
              border
            >是</el-radio>
            <el-radio
              v-model="formData.rareVariety"
              :label="0"
              border
            >否</el-radio>
          </el-form-item> -->
          <el-form-item label="来源地">
            <v-distpicker
              :province="formData.province"
              :city="formData.city"
              :area="formData.county"
              @selected="onSelected"
            />
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input
              v-model="formData.address"
              placeholder="请输入详细地址！"
              style="width: 400px"
            />
          </el-form-item>
          <el-form-item label="封面">
            <cover-upload :key-id.sync="formData.coverImgId" />
          </el-form-item>
          <el-form-item label="内容摘要">
            <el-input
              v-model="formData.abstractMessage"
              type="textarea"
              style="width: 500px"
              class="abstract"
              placeholder="请输入内容摘要"
            />
          </el-form-item>
          <el-form-item label="品种介绍">
            <div class="introduce">
              <t-editor v-model="formData.varietyIntroduce" />
              <!-- <q-editor :content.sync="formData.varietyIntroduce" /> -->
              <!-- <vue-wangeditor
                style=""
                id="editor"
                v-model="formData.varietyIntroduce"
              ></vue-wangeditor> -->
              <!-- <tea-edit v-model="formData.varietyIntroduce" /> -->
            </div>
          </el-form-item>
          <template v-for="(item, index) in varietyList">
            <el-form-item
              :key="item.id"
              :label="item.imgType"
              label-position="center"
            >
              <div class="variety-item">
                <div class="variety-item-title" />
                <div class="variety-item-upload">
                  <!-- <upload-list
                    :imgType="item.id"
                    :imgsId.sync="formData.imgIds[index]"
                  /> -->
                  <tea-upload
                    :key-id.sync="formData.imgIds[index]"
                    :img-type.sync="item.id"
                  />
                </div>
              </div>
            </el-form-item>
          </template>
          <el-form-item label="备注信息（添加）">
            <back-message :list.sync="formData.exTeaMessageParams" />
          </el-form-item>
        </el-form>
      </div>

      <el-button
        class="add-message"
        type="danger"
        @click="addMessage"
      >点击确认添加茶种</el-button>
    </div>
  </div>
</template>

<script>
import { province } from '@/datas/index';
import SelectArea from '../components/select-area';
import { findAllVariety, addMessage } from '@/api/tea-manager';

import CoverUpload from '@components/common/upload';
// import TeaEdit from "../components/t-editor.vue";
import BackMessage from '../components/back-message.vue';
import vueWangeditor from 'vue-wangeditor';
import QEditor from '@/components/Editor/index.vue';
import TEditor from '../components/tea-edit.vue';
import TeaUpload from '@/components/common/tea-upload.vue';
// import UploadList from "@/components/common/upload-list.vue";
export default {
  components: {
    SelectArea,
    TeaUpload,
    CoverUpload,
    BackMessage,
    vueWangeditor,
    QEditor,
    TEditor
  },
  data() {
    return {
      varietyList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }
        ]
      },
      gradeList: [
        {
          value: '国家级',
          label: '国家级'
        },
        {
          value: '省级',
          label: '省级'
        }
      ],
      province,
      formData: {
        imgIds: [],
        exTeaMessageParams: []
      }
    };
  },
  created() {
    findAllVariety().then((res) => {
      console.log(res);
      const varietyList = res.data.data;
      this.varietyList = varietyList;
    });
  },
  methods: {
    goBack() {
      this.$emit('update:showIndex', 0);
      this.$emit('goBack');
    },
    addMessage() {
      console.log(this.formData);
      addMessage(this.formData)
        .then((res) => {
          if (res.data.code !== 200) {
            this.$message.error(res.data.code.message);
            return;
          }
          this.goBack();
          this.$message.success('添加茶种成功');
        })
        .catch((err) => {
          this.$message.error('添加茶种失败');
        });
    },
    onSelected(val) {
      console.log(val);
      const { province, city, area } = val;
      this.formData.province = province.value;
      this.formData.city = city.value;
      this.formData.county = area.value;
      console.log(val.city.code); //  打印出城市的code
    }
  }
};
</script>
<style lang="scss" scoped>
.card {
  /*background:rgba(255,255,255,1);*/
  border: 1px solid rgba(211, 211, 211, 1);
  .title {
    width: 100%;
    height: 48px;
    background: rgba(241, 245, 249, 1);
    border: 1px solid rgba(211, 211, 211, 1);
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: rgba(27, 33, 63, 1);
    display: flex;
    align-items: center;
    padding-left: 32px;
  }
  .body {
    width: 100%;
    padding: 60px;
    .variety-item {
      display: flex;
      .variety-item-title {
        // display: flex;
        // align-items: center;
        // margin-right: 30px;
      }
    }
    .base-message {
    }
    .introduce {
      width: 70%;
    }
  }
}
.add-message {
  position: fixed;
  left: 240px;
  bottom: 120px;
}
::v-deep .abstract textarea {
  height: 150px !important;
}
</style>
